<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
</head>
<body>

<div id="app">
<!--    条件查询-->
    <div :model="bbb" class="demo-input-size" >
     角色:
        <template>
        <el-select v-model="bbb.role" placeholder="请选择部门">
            <el-option
                    v-for="item in juese"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>
    </template>

     用户名称： <el-input  v-model="bbb.faRen"  style="width: 12%"  placeholder="请输入内容" ></el-input>
     企业名： <el-input  v-model="bbb.name"  style="width: 12%"  placeholder="请输入内容" ></el-input>
     启用状态：
        <template>
        <el-select v-model="bbb.status2" placeholder="请选择部门">
            <el-option
                    v-for="item in zhuangtai"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>
    </template>

<!--     时间:<template>-->
<!--        <div class="block">-->
<!--            <el-date-picker-->
<!--                    v-model="bbb.timeStart"-->
<!--                    type="daterange"-->
<!--                    format="yyyy-MM-dd HH:mm:ss"-->
<!--                    value-format="yyyy-MM-dd HH:mm:ss"-->
<!--                    range-separator="至"-->
<!--                    start-placeholder="开始日期"-->
<!--                    end-placeholder= "结束日期">-->
<!--            </el-date-picker>-->
<!--        </div>-->
<!--    </template>-->


        <el-button type="primary" icon="el-icon-search"  @click="mohu">搜索</el-button>
    </div>

    <div>
        <el-button type="danger" plain  @click="changeGo">批量启用/停用</el-button>
    </div>

<div>
    <el-table
            ref="multipleTable"
            tooltip-effect="dark"
            :data="tableData"
            @selection-change="changeAll"
            style="width: 100%">

<!--选择框-->
        <el-table-column
                type="selection"
                width="55"

        >
        </el-table-column>

        <el-table-column
                label="角色"
        >
            <template slot-scope="scope">
                <span >{{ scope.row.roleId=="0"?'供应商':'代理商' }}</span>
            </template>
        </el-table-column>

        <el-table-column
                label="联系人"
        >
            <template slot-scope="scope">
                <span >{{ scope.row.legal }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="企业名称"
        >
            <template slot-scope="scope">
                <span >{{ scope.row.companyName }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="联系方式"
        >
            <template slot-scope="scope">
                <span >{{ scope.row.fixedTel }}</span>
            </template>
        </el-table-column>

        <el-table-column
                label="地址"
        >
            <template slot-scope="scope">
                <span >
                {{ scope.row.companyProvince }}
                {{ scope.row.companyCity }}
                {{ scope.row.companyArea }}
                {{ scope.row.companyAddress }}
                </span>
            </template>
        </el-table-column>
        <el-table-column
                label="用户数"
        >
            <template slot-scope="scope">
                <span >{{ scope.row.staffNumber }}</span>
            </template>
        </el-table-column>

        <el-table-column
                label="用户启用数"
        >
            <template slot-scope="scope">
                <span >{{ scope.row.staffNumberYes }}</span>
            </template>
        </el-table-column>

        <el-table-column
                label="状态"
        >
            <template slot-scope="scope">
                <span v-if="scope.row.companyStatus=='on'" style="color: #5daf34">已启用</span>
                <span v-else style="color: red">已停用</span>
            </template>
        </el-table-column>

        <el-table-column label="操作">
            <template slot-scope="scope">

                <el-button
                        size="mini"
                        @click="changeStatus(scope.$index, scope.row)"
                        type="success"
                        icon="el-icon-check"
                ></el-button>
                <el-button
                        size="mini"
                        type="primary"
                        icon="el-icon-tickets"
                        @click="handToStaff(scope.$index, scope.row)"

                ></el-button>

         </template>-->
        </el-table-column>

    </el-table>
    <!--    分页-->
    <div class="block">
        <el-row type="flex" class="row-bg" justify="space-between">
            <el-col :span="6">
                <span v-if="current*pageSize>total">第{{(current-1)*pageSize+1}}到{{total}}条记录,总共{{total}}条</span>
                <span v-else>第{{(current-1)*pageSize+1}}到{{current*pageSize}}条记录,总共{{total}}条</span>
            </el-col>
            <el-col :span="6">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        @current-change="loadPage"
                        :total="total"
                        :current-page="current"
                        :page-size="pageSize"
                >
                </el-pagination>
            </el-col>
        </el-row>
    </div>
</div>
</div>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<script src="/js/elementui/index.js"></script>

<script>
    new Vue({
        el:"#app",
        data(){
            return{
                tableData: null,//表数据
                total:0,//总条数
                current:1, //当前页数
                pageSize:5, //每页条数
                changeAllStatus:'',

                juese:[{
                    value:0,
                    label:'供应商'
                },{
                    value: 1,
                    label: '代理商'
                }],
                zhuangtai:[{
                    value:'on',
                    label:'已启用'
                },
                    {
                        value: 'off',
                        label: '未激活'
                    }],
                bbb:{
                    role:1,
                    faRen:'',
                    name:'',
                    status2:'on',
                    time:''
                }
            }

        },
        mounted(){
            this.loadPage(1);

        },
        methods:{
            //当前页面跳转方法
            loadPage(current){
                this.current=current;
                axios.get("/qiToCompanys?current="+current).then(value => {
                    this.tableData=value.data.records;
                    this.total = value.data.total;
                    this.pageSize = value.data.size;
                    this.current = value.data.current;
                })
            },

            //模糊查询
            mohu(){
                if (this.bbb.name==""){
                    this.bbb.name=null;
                }
                if (this.bbb.faRen==""){
                    this.bbb.faRen=null;
                }
                console.log(this.bbb.faRen);
                console.log(this.bbb.name);
                console.log(this.bbb.time)
                axios.get("/qiToCompanysToMo/"+this.current+"/"+this.bbb.role+"/"+this.bbb.faRen+"/"+this.bbb.name+"/"+this.bbb.status2).then(value => {
                   if (value.data.code==1){
                       this.tableData=value.data.data.records;
                       this.total = value.data.data.total;
                       this.pageSize = value.data.data.size;
                       this.current = value.data.data.current;
                   }

                })
            },

            //显示修改用户的对话框
            changeStatus(index, row) {
                console.log(index, row);
                axios.put("/qiToCompanysStatus/"+row.id).then(value => {
                    console.log(row.id)

                    if (value.data.code==1){
                        this.mohu();
                    }
                })
            },
            // 跳转到详情页面
            handToStaff(index, row) {

                axios.get("/qiYeToStaff/"+row.id).then(value => {
                    console.log(row.id)
                    location.href="/qiye/qiYeStaff.html";
                })

            }
            ,
        //批量停用获取值
          changeAll(selection){
              console.log(selection)
              this.changeAllStatus=''
              for (let selectionKey in selection) {
                  this.changeAllStatus+=selection[selectionKey].id+","
              }
              this.changeAllStatus=this.changeAllStatus.substring(0, this.changeAllStatus.length - 1);
              console.log("s所有的"+this.changeAllStatus);
          }
        //  进行批量停用或者启动
            ,
            changeGo(){
               if (this.changeAllStatus==""){
                   alert("请正确的勾选")
               }else {
                   var arr1= this.changeAllStatus.split(",");
                   for (let arr of arr1) {
                       axios.put("/qiToCompanysStatus/"+arr).then(value => {
                           if (value.data.code==1){
                              this.mohu()
                           }
                   })
               }
            }
        }
    }})

</script>

</body>
</html>